<template>
    <div>
        <div>
            <el-input style="width: 150px;float: left"
                      v-model="search"
                      class="search_name"
                      @keyup.native="onSearch()"
                      placeholder="输入保证金查询">
            </el-input>
            <el-input style="width: 150px;float: left"
                      v-model="search2"
                      class="search_name"
                      @keyup.native="onSearch()"
                      placeholder="输入楼栋查询">
            </el-input>
            <el-input style="width: 150px;float: left"
                      v-model="search1"
                      class="search_name"
                      @keyup.native="onSearch()"
                      placeholder="输入业主查询">
            </el-input>
            <el-button style="float: left;margin-left: 50px;margin-bottom: 10px"
                       class="el-icon-circle-plus-outline"
                       type="success"
                       @click="dialogVisible = true">添加
            </el-button>
            <el-button type="primary" style="margin:20px" @click="getExcel">导出Excel
            </el-button>
            <el-table :data="users.slice((currentPage-1)*pageSize,currentPage*pageSize)" border stripe>
                <el-table-column label="序号" prop="cid"/>
                <el-table-column
                        type="selection"
                        width="40" >
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="订单编号" prop="contractnum"/>
                <el-table-column label="内容" prop="content"/>
                <el-table-column label="合同日期" prop="contracttime"/>
                <el-table-column label="合同金额" prop="expire"/>
                <el-table-column label="到期日期" prop="time"/>
                <el-table-column label="状态" prop="state"/>
                <el-table-column label="已付金额" prop="money"/>
                <el-table-column label="月份" prop="month.mname"/>
                <el-table-column label="业主" prop="owner.oname"/>
                <el-table-column label="楼栋" prop="tower.tname"/>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog
                    title="添加页面"
                    :visible.sync="dialogVisible"
                    width="30%"
                    @close='cancel'
            >
                <el-form style="width: 40%" :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="订单编号" prop="contractnum">
                        <el-input v-model="ruleForm.contractnum" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="内容" prop="content">
                        <el-input v-model="ruleForm.content" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="合同日期" prop="contracttime">
                        <el-input v-model="ruleForm.contracttime" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="合同金额" prop="expire">
                        <el-input v-model="ruleForm.expire" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="到期日期" prop="time">
                        <el-input v-model="ruleForm.time" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="state">
                        <el-input v-model="ruleForm.state" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="已付金额" prop="money">
                        <el-input v-model="ruleForm.money" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="业主" prop="oid">
                        <el-select  v-model="ruleForm.oid" style="width: 300px">
                            <el-option v-for="item in selectList" :key="item.oid" :label="item.oname" :value="item.oid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="月份" prop="mid">
                        <el-select  v-model="ruleForm.mid" style="width: 300px">
                            <el-option v-for="item in selectList2" :key="item.mid" :label="item.mname" :value="item.mid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="楼栋" prop="tid">
                        <el-select  v-model="ruleForm.tid" style="width: 300px">
                            <el-option v-for="item in selectList1" :key="item.tid" :label="item.tname" :value="item.tid"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()" size="medium">取 消</el-button>
            <el-button @click="addUser()" type="primary" size="medium">确 定</el-button>
          </span>
  </span>
            </el-dialog>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm" size="medium">
                <el-dialog
                        title="编辑"
                        :append-to-body='true'
                        :visible.sync="dialogUpdate"
                        width="30%"
                        :before-close="cancel">
                    <el-form style="width: 40%" :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <!--        <el-form-item label="客户订单编号" prop="id">-->
                        <!--          <el-input v-model="formInline.id" style="width: 300px"></el-input>-->
                        <!--        </el-form-item>-->

                        <!--      </el-form-item>-->
                        <el-form-item label="序号" prop="cid" style="display:none">
                            <el-input v-model="ruleForm.cid" type="hidden" style="width: 300px" ></el-input>
                        </el-form-item>
                        <el-form-item label="订单编号" prop="contractnum">
                            <el-input v-model="ruleForm.contractnum" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="内容" prop="content">
                            <el-input v-model="ruleForm.content" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="合同日期" prop="contracttime">
                            <el-input v-model="ruleForm.contracttime" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="合同金额" prop="expire">
                            <el-input v-model="ruleForm.expire" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="到期日期" prop="time">
                            <el-input v-model="ruleForm.time" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" prop="state">
                            <el-input v-model="ruleForm.state" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="已付金额" prop="money">
                            <el-input v-model="ruleForm.money" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="业主" prop="oid">
                            <el-select  v-model="ruleForm.oid" style="width: 300px">
                                <el-option v-for="item in selectList" :key="item.oid" :label="item.oname" :value="item.oid"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="月份" prop="mid">
                            <el-select  v-model="ruleForm.mid" style="width: 300px">
                                <el-option v-for="item in selectList2" :key="item.mid" :label="item.mname" :value="item.mid"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="楼栋" prop="tid">
                            <el-select  v-model="ruleForm.tid" style="width: 300px">
                                <el-option v-for="item in selectList1" :key="item.tid" :label="item.tname" :value="item.tid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
     <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()" size="medium">取 消</el-button>
            <el-button @click="updateUser()" type="primary" size="medium">确 定</el-button>
          </span>
          </span>
                </el-dialog>
            </el-form>
        </div>
        <div class="block" style="float: right">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[3, 6, 9, 12]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "vue1",
        data() {
            return {
                dialogUpdate: false,
                dialogVisible: false,
                selectList: {oname:'', oid:''},
                selectList1: {tname:'', tid:''},
                selectList2: {mname:'', mid:''},
                pageSize: 3,
                currentPage: 1,
                total: 0,
                selectDate:[],
                selectWindow:false,
                search: '',
                search1: '',
                search2: '',
                res :[
                    {cid:'',ontractnum:'', content:'',contracttime:'',expire:'',time:'',state:'',money:'',}
                    ],
                activeName: 'a',
                radio: '1',
                users: {},
                ruleForm:{
                    cid:'',
                    contractnum:'',
                    content:'',
                    contracttime:'',
                    expire:'',
                    time:'',
                    state:'',
                    money:'',
                    oid:'',
                    oname:'',
                    tid:'',
                    tname:'',
                    mid:'',
                    mname:'',
                }
            };
        },
        created() {
            const that = this;
            this.getPages();
            this.axios.get('http://localhost:8081/selectContractList')
                .then(function (response) {
                    console.log(response);
                    that.users = response.data;
                }),this.axios.get('http://localhost:8081/selectOwnerList')
                .then(function (response) {
                    console.log(response);
                    that.selectList = response.data;

                }),
                this.axios.get('http://localhost:8081/selectMonthList')
                    .then(function (response) {
                        console.log(response);
                        that.selectList2 = response.data;
                        that.users= response.data;
                    }),
                this.axios.get('http://localhost:8081/selectTowerList')
                    .then(function (response) {
                        console.log(response);
                        that.selectList1 = response.data;
                    })
        },

        methods:{
            getExcel() {
                require.ensure([], () => {
                    const { export_json_to_excel } = require('../router/Export2Excel.js')
                    const tHeader = ['序号', '订单编号','内容','合同日期','合同金额','到期日期','状态','已付金额','月份']
                    const filterVal = ['cid', 'contractnum','content','contracttime','expire','time','state','money','month.mname']
                    const list = this.users
                    const data = this.formatJson(filterVal, list)
                    export_json_to_excel(tHeader, data, '合同应付款收缴录入')
                })
            },

            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },
            updateUser() {
                let postData = this.qs.stringify({
                    cid:this.ruleForm.cid,
                    contractnum: this.ruleForm.contractnum,
                    content: this.ruleForm.content,
                    contracttime: this.ruleForm.contracttime,
                    expire: this.ruleForm.expire,
                    time: this.ruleForm.time,
                    state: this.ruleForm.state,
                    money: this.ruleForm.money,
                    oid: this.ruleForm.oid,
                    tid: this.ruleForm.tid,
                    mid: this.ruleForm.mid,

                });
                this.axios({
                    method: 'post',
                    url:'http://localhost:8081/updateContract',
                    data:postData
                }).then(response =>
                {
                    this.axios.post('http://localhost:8081/selectContractList').then(response =>
                    {
                        this.tableData = response.data;
                        this.currentPage = 1;
                        this.onSearch();
                        this.cancel()
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                    }).catch(error =>
                    {
                        console.log(error);
                        location.reload()
                    });
                    this.getPages();
                    this.dialogVisible = false
                    console.log(response);
                }).catch(error =>
                {
                    console.log(error);
                    location.reload();
                });
            },
            handleEdit(index, row) {
                this.dialogUpdate = true;
                this.ruleForm = Object.assign({}, row); //这句是关键！！！
            },
            cancel() {
                this.ruleForm.cid='',
                    this.ruleForm.contractnum='',
                    this.ruleForm.content='',
                    this.ruleForm.contracttime='',
                    this.ruleForm.expire='',
                    this.ruleForm.time='',
                    this.ruleForm.state='',
                    this.ruleForm.money='',
                    this.ruleForm.oid='',
                    this.ruleForm.oname='',
                    this.ruleForm.tid='',
                    this.ruleForm.tname='',
                    this.ruleForm.mid='',
                    this.ruleForm.mname=''
                this.dialogVisible = false;
                this.dialogUpdate=false
            },
            addUser() {
                let postData = this.qs.stringify({
                    contractnum: this.ruleForm.contractnum,
                    content: this.ruleForm.content,
                    contracttime: this.ruleForm.contracttime,
                    expire: this.ruleForm.expire,
                    time: this.ruleForm.time,
                    state: this.ruleForm.state,
                    money: this.ruleForm.money,
                    oid: this.ruleForm.oid,
                    tid: this.ruleForm.tid,
                    mid: this.ruleForm.mid,
                });
                this.axios({
                    method: 'post',
                    url:'http://localhost:8081/addContract',
                    data:postData
                }).then(response =>
                {
                    this.axios.post('http://localhost:8081/selectContractList').then(response =>
                    {
                        this.tableData = response.data;
                        this.currentPage = 1;
                        this.onSearch();
                        this.cancel()
                        this.$message({
                            type: 'success',
                            message: '已添加!'
                        });
                    }).catch(error =>
                    {
                        console.log(error);
                        location.reload()
                    });
                    this.getPages();
                    this.dialogVisible = false
                    console.log(response);
                }).catch(error =>
                {
                    console.log(error);
                    location.reload();
                });
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.$confirm('删除操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let postData = this.qs.stringify({
                        cid: row.cid,
                    });
                    this.axios({
                        method: 'post',
                        url:'http://localhost:8081/deleteContract',
                        data:postData
                    }).then(response =>
                    {
                        this.getPages();
                        this.currentPage = 1;
                        this.axios.post('http://localhost:8081/selectContractList').then(response =>
                        {
                            this.tableData = response.data;
                        }).catch(error =>
                        {
                            console.log(error);
                            this.onSearch();
                        });
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        console.log(response);
                        this.onSearch();
                    }).catch(error =>
                    {
                        console.log(error);
                        this.onSearch();
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            onSearch() {
                let postData = this.qs.stringify({
                    contractnum: this.search,
                    oname: this.search1,
                    tname: this.search2,
                });
                this.axios({
                    method: 'post',
                    url: 'http://localhost:8081/selectContractList',
                    data: postData
                }).then(response =>
                {
                    this.getPages();
                    this.users = response.data;
                    this.disablePage = true;
                }).catch(error =>
                {
                    console.log(error);
                });
            },
            handleSizeChange(val) {
                this.getPageData();
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.getPageData();
                console.log(this.pageSize);
            },
            handleCurrentChange(val) {
                this.getPageData();
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.getPageData();
                console.log(this.currentPage);
            },
            getPageData() {
                console.log("是否yes");
                let start = (this.currentPage - 1) * this.pageSize;
                let end = start + this.pageSize;
                this.schArr = this.users.slice(start, end);
                this.total = this.users.length;
            },
            getPages() {
                let postData = this.qs.stringify({
                    contractnum: this.search,
                    oname: this.search1,
                    tname: this.search2,
                });
                this.axios({
                    method: 'post',
                    url: 'http://localhost:8081/getCount',
                    data: postData
                }).then(response =>
                {
                    this.total = response.data;
                }).catch(error =>
                {
                    console.log(error);
                });
            },
        }
    }
</script>

<style scoped>

</style>